<template>
    <view class="content">
        <view class="main">
            <van-nav-bar left-arrow @click-left="onClickLeft" class="fixed_top" id="navBar"> </van-nav-bar>

            <scroll-view scroll-y="true" @scroll="handleScroll" style="height: 100vh;" :scroll-top="scrollTop"
                ref="myScrollView" show-scrollbar="false">
                <!-- 这里是页面其他内容 -->
                <!-- <view class="content-top fixed_top" :style="bgOpacity" id="content_top">
                    <view class="tabBox" :class="{ top_display: !scrolling }" id="tabBox" :style="scrollMT">
                        <view class="tabs white">
                            <view class="tabbar-item tab-item" v-for="(ite, index) in tabBarList"
                                @click="changeTab(index, $event, ite.typeName)"
                                :class="{ active: index === currentIndex, option: currentIndex === 0, }" :key="index">
                                {{ ite.typeName }}
                            </view>
                        </view>
                    </view>

                </view> -->
                <view class="main-container" ref="container"
                    :class="{ 'element_to_animate': isAnimated, 'animate_class': isAnimated, }">
                    <!-- 商品图片  五张轮播 -->
                    <view class="goodsImg" ref="goodsImg">
                        <view class="shequTop" :style="infoTop">
                            <view class="xiaoquImg"><img
                                    src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/xioaqu.png"
                                    alt="" mode="widthFix"></view>
                            <view class="xiaoquInfo">
                                <view class="xiaoquName">东郡·水岸华庭小区</view>
                                <view class="xiaoquTag">
                                    <view class="tag" v-for="(item, index) in tagList" :key="index">
                                        {{ item }}
                                    </view>
                                </view>
                            </view>
                        </view>
                        <!-- 小区介绍 -->
                        <view class="communityIntroduction">
                            东郡 ·水岸华庭物业，为业主们打造的生活服务综合平台，让更多人享受美好生活。
                        </view>
                        <view class="membersList">
                            <view class="joinActMembers">
                                <view class="joinUser_info " v-for="(item,index) in homeownerList.slice(0,5)" :key="index" :class="index===0 ? 'left-image': 'middle-image'" 
                                :style="'z-index:'+ (Number(index)+1)">
                                    <img class="image-item" :src="item" alt="">
                                </view>
                                <!-- <view class="joinUser_info middle-image">
                                    <img class="image-item"
                                        src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/find_act.png"
                                        alt="">
                                </view>
                                <view class="joinUser_info right-image">
                                    <img class="image-item"
                                        src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/my/info.png"
                                        alt="">
                                </view> -->
                            </view>
                            <view class="allMembers">{{allhomeowner}}名业主朋友</view>
                        </view>
                        <view class="btnArea">
                            <van-button class="" type="default">关注</van-button>
                        </view>
                    </view>
                    <!-- 通知 -->
                    <view class="notice">
                        <van-notice-bar left-icon="volume-o" background='#ecf7ff' color="#111111" scrollable
                            text="为了增进社区居民之间的感情，丰富大家的业余生活！为了增进社区居民之间的感情，丰富大家的业余生活！" id="noticeBar" />
                    </view>
                    <view class="communityActivity content-top">
                        <view class="tabs">
                            <view class="tabbar-item " v-for="(item, index) in tabBarList"
                                @click="changeTab(index, $event, item.name)"
                                :class="{ active: index === currentIndex, option: currentIndex === 0, }" :key="index">
                                {{ item.name }}
                            </view>
                        </view>
                        <view class="informationList">
                            <view class="box_content" v-for="(i, j) in informationList" :key="j">
                                <!-- <view class=" act_display"> -->
                                <view class="content_img"><img :src="i.activities.image" alt="" mode="widthFix"> </view>
                                <view class="content_text act_text">
                                    <view class="content_text_subtitle ">
                                        <view class="content_text_startTime"> {{ i.startMonth }} {{i.weekDay}}{{i.startTimeHour}}</view>
                                    </view>
                                    <view class="content_text_title act_title">{{ i.activities.title }}</view>

                                    <view class="members">
                                        <view class="joinActMembers" v-if="i.joinMembersList && i.joinMembersList.length > 0" >
                                            <view class="joinUser_info " v-for="(ele,val) in i.joinMembersList.slice(0,3)" :key="val" :class="index===0 ? 'left-image' : (index==1 ? 'middle-image':'right-image') ">
                                                <img class="image-item" :src="ele" alt="">
                                            </view>
                                            <!-- </template> -->
                                            <!-- <view class="joinUser_info middle-image">
                                                <img class="image-item"
                                                    src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/find_act.png"
                                                    alt="">
                                            </view>
                                            <view class="joinUser_info right-image">
                                                <img class="image-item"
                                                    src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/my/info.png"
                                                    alt="">
                                            </view> -->
                                        </view>
                                        <view class="actStatus"> <span v-if="i.joinMembersList.length>0"> {{ i.joinMembersList.length }}人报名</span> <span style="margin:0rpx 22rpx;"  v-if="i.joinMembersList.length>0">|</span>  <span class="status">立即报名</span></view>
                                    </view>
                                </view>
                                <!-- </view> -->
                            </view>
                        </view>
                    </view>
                </view>
            </scroll-view>
        </view>
    </view>
</template>

<script>
import evaluationStatistics from '@/mycomponents/evaluationStatistics.vue';
import {getCommunityActivitiesApi } from '@/api/activity';
export default {
    components: {
        evaluationStatistics,
    },
    data() {
        return {
            title: '服务人员',
            scrolling: false, // 顶部区域吸顶效果
            bgOpacity: '',
            scrollMT: '',
            scrollView: '',
            scrollTop: 0,
            old: {
                scrollTop: 0
            },
            listTop: 0,
            detailTop: 0,
            value1: 0,
            value2: 'a',
            currentIndex: 0, // 滚动时页面顶部出现的Tab
            isTruncated: true, // 商品标题显示
            lineClamp: 2,

            sliderImageList: [
                'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/service/staffInfoPic.png', 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/service/staffInfoPic.png'
            ],
            currentBtn: -1,

            // 用户评价
            swiperCurrent: 0,
            tabCurrent: 'tabNum1',
            tabBarList:[
                // {name:'通知',num:2},
                {name:'活动',num:2},
                {name:'商铺',num:2},
                {name:'讨论',num:2},
            ],
            params: {},
            tabHeight: 118,
            navHeight: uni.getStorageSync('navHeight'), // 顶部导航栏的高度
            tagList:['运城市','物业','东郡'],
            infoTop:'', //距离页面顶部的距离
            homeownerList:['https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/my/info.png','https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/find_act.png','https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/find_act.png','https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/my/info.png'],
            allhomeowner:"2436",
            informationList: [
            //     {
            //     image: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/actImg1.png',
            //     title: "社区活动 | 零基础瑜伽体验活动",
            //     startTime: '10月13日 周六 14:00-16:00',
            //     location: "水岸华庭·东郡 | 篮球场",
            //     joinMembersList:['https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/my/info.png','https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/find_act.png','https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/find_act.png','https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/my/info.png'],
            //     joinNum:'10',
            // },
            // {
            //     // imgurl: require("../../static/actImg2.png"),
            //     image: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/actImg1.png',
            //     title: "公益活动|心肺复苏 CPR+AED 培训活动",
            //     startTime: '10月20日 19:00-21:00',
            //     location: "盐湖区 | 金鑫大酒店",
            //     joinMembersList:[],
            //     joinNum:'10',
            // },
            // {
            //     // imgurl: require("../../static/actImg2.png"),
            //     image: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/actImg1.png',
            //     title: "公益活动|心肺复苏 CPR+AED 培训活动",
            //     startTime: '10月20日 19:00-21:00',
            //     location: "盐湖区 | 金鑫大酒店",
            //     joinMembersList:['https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/service/staffInfoPic.png','https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/find_act.png','https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/service/staffInfoPic.png'],
            //     joinNum:'10',
            // },
            // {
            //     // imgurl: require("../../static/actImg2.png"),
            //     image: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/actImg1.png',
            //     title: "公益活动|心肺复苏 CPR+AED 培训活动",
            //     startTime: '10月20日 19:00-21:00',
            //     location: "盐湖区 | 金鑫大酒店",
            //     joinMembersList:['https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/service/staffInfoPic.png','https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/find_act.png','https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/service/staffInfoPic.png'],
            //     joinNum:'10',
            // }
        ],
            organizationId:undefined, //活动发起人id
        }
    },

    computed: {
        // slotClass(time) {
        //     return {
        //     'available-slot': this.day.timeSlots[time],
        //     'unavailable-slot':!this.day.timeSlots[time]
        //     };
        // }
    },
    onLoad(data) {
        const menuButtonInfo = wx.getMenuButtonBoundingClientRect()
        console.log('胶囊按钮高度：', menuButtonInfo.height)
        console.log('胶囊按钮top：', menuButtonInfo.top, menuButtonInfo)
        console.log('胶囊按钮宽度：', menuButtonInfo.width)
        const mtTop= menuButtonInfo.top + menuButtonInfo.height +  24 +'px'
        this.infoTop='margin-top:'+ mtTop
        console.log(this.infoTop,'infoTop')

        // 取到路由携带的参数
        if (data && data.params) {
            this.params = JSON.parse(decodeURIComponent(data.params))
            console.log(JSON.parse(decodeURIComponent(data.params)))
            console.log('params', this.params)

            this.organizationId = this.params.orgId


        }
    },
    onShow(){
        this.getCommunityActivitiesInfo(23)
    },
    onReady() {
        // const abnormal = this.getAbnormalDetailsMethod()
        // Promise.all([abnormal]).then(() => {
        //     console.log('所有api加载完成')
        //     this.loadingIsShow = false
        // })
        // const query = uni.createSelectorQuery().in(this)
        // // 需要给评论区域设置一个id标识，在这里是demo
        // query.select('#judge_box').boundingClientRect(data => {
        //     console.log(data, data.top, 'data.top')// 这个就是距离顶部的高度
        //     this.listTop = data.top // 赋值，待会要用
        // }).exec()

        // // //需要给商品详情区域设置一个id标识，在这里是demo
        // query.select('#goodsDetail').boundingClientRect(data => {
        //     console.log(data.top, 'data.top--')// 这个就是距离顶部的高度
        //     this.detailTop = data.top // 赋值，待会要用
        // }).exec()



    },
    beforeDestroy() {
        clearInterval(this.timer); // 在组件销毁前清除定时器，防止内存泄漏
    },
    methods: {

        handleScroll(e) {
            console.log('顶部滚动距离', e.detail.scrollTop)
            this.old.scrollTop = e.detail.scrollTop

            if (e.detail.scrollTop > 0.2 && !this.scrolling) {
                this.scrolling = true

            } else if (e.detail.scrollTop <= 0.2 && this.scrolling) {
                this.scrolling = false
                this.scrollMT = 'margin-top:90px;'
            }
            this.bgOpacity = `background: rgba(255, 255, 255, ${e.detail.scrollTop / 200})`
            // console.log(this.bgOpacity)
        },

        // 商品图片轮播图事件
        changeSwiper(e) {
            this.currentSwiperItem = e.detail.current // 指示点随着轮播图动
        },
        // 点击轮播图上指示点
        swiperDot(index) {
            // console.log(index,'index currentDot')
            this.currentSwiper = index // 轮播图随着指示点动
        },

        // 返回的箭头
        onClickLeft() {
            uni.navigateBack()
        },

        // 滑动时出现的tab
        changeTab(index, e) {
            this.currentIndex = index
            console.log(e, '090909', this.tabHeight, this.old.scrollTop, 'this.old.scrollTop')

            this.scrollTop = this.old.scrollTop

            if (index === 0) {
                this.$nextTick(function () {
                    this.isAnimated = true
                    this.isAnimatedJudge = false
                    this.isAnimatedDetail = false
                    this.scrollTop = 0
                })
            } else if (index === 1) {
                this.$nextTick(function () {
                    this.isAnimated = false
                    this.isAnimatedJudge = true
                    this.isAnimatedDetail = false
                    // this.scrollTop='579'
                    // 得出的top要减去 固定的tab的高度
                    this.scrollTop = this.listTop - this.tabHeight
                    console.log(this.scrollTop, 'ooo909090uiiu')
                })
            } else {
                this.$nextTick(function () {
                    this.isAnimated = false
                    this.isAnimatedJudge = false
                    this.isAnimatedDetail = true
                    this.scrollTop = this.detailTop - this.tabHeight
                })
            }
        },
        // 活动主页
        getCommunityActivitiesInfo(organizationId){
            getCommunityActivitiesApi(organizationId).then(res=>{
                console.log(res,'活动主页')
                if(res.code===200){
                    this.informationList=res.data.list
                    this.informationList.forEach((item)=>{
                        item.joinMembersList = item.useravatarUrls
                            ? item.useravatarUrls.split(',').filter(url => url.trim() !== '')
                            : []
                    })
                    console.log(this.informationList,'this.informationList')
                }
            })
        }
    }
}

</script>

<style lang="scss" scoped>
::v-deep .van-nav-bar {
    background-color: transparent !important;
}

.content {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    height: 100vh;
    overflow: hidden;
    z-index: -2;
    background-size: 100%;
    background-color: #ffffff;

}

.main {
    position: relative;
    // margin-bottom:36px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    height: 100vh;
    background-color: transparent;

    .fixed_top {
        position: fixed;
        width: 100%;
        z-index: 999;
    }

    .top_display {
        display: none;
    }
}

.tabBox {
    position: relative;
    margin-top: 90px;
    // border-bottom: 1px solid #E0E0E0;
}

.main-container {
    padding-bottom: calc(30rpx + env(safe-area-inset-bottom));
    background: #ffffff;
    height: calc(100vh - (30rpx + env(safe-area-inset-bottom)));
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    z-index: -1;

}

// 滚动
.scroll-content {
    flex: 1;
    height: 1px;
}


.goodsImg {
    width: 100%;
    height: 650rpx;
    background: linear-gradient(166deg, #95CCF3 100%, #5EA5D7 100%);

    .shequTop{
        display: flex;
        align-items: center;
        padding: 0rpx 48rpx;
        .xiaoquImg{
            width: 20%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            img{
                width: 100%;
                height: auto;
            }
        }
    }
    .xiaoquInfo{
        margin-left: 33rpx;
        width: calc(80% - 33rpx);
        display: flex;
        flex-direction: column;
        justify-content: center;

        .xiaoquName{
            font-weight: bolder;
            font-size: 36rpx;
            line-height: 36rpx;
            text-align: left;
            color: #FFFFFF;
        }
        .xiaoquTag{
            display: flex;
            align-items: center;
            margin-top: 44rpx ;

            .tag{
                border-radius: 4px 4px 4px 4px;
                background: rgb(165, 210, 242, 0.68);
                font-size: 24rpx;
                text-align: center;
                color: #FFFFFF;
                margin-right: 19rpx;
                padding: 8rpx 18rpx;
                line-height: 24rpx;
            }
        }
    }

    .communityIntroduction{
        margin-top: 36rpx;
        padding: 0rpx 48rpx;
        color: #ffffff;
        font-size: 24rpx;
        text-align: left;
    }
    // 业主朋友
    .membersList{
        margin-top: 32rpx;
        padding: 0rpx 48rpx;
        display: flex;
        align-items: center;
        
        .joinActMembers{
            display: flex;
            align-items: center;
            .joinUser_info{
                position: relative;
                width: 44rpx;
                height: 44rpx;
                background: rgb(255, 255, 255);
                border-radius: 50%;
            }
            .image-item{
                position: absolute;
                border-radius: 50%;
                left: 1rpx;
                top: 1rpx;
                width: 40rpx;
                height: 40rpx;
                // line-height: 40rpx;
            }

            .left-image{
                // position: absolute;
                // left: 0px;
                z-index: 1; /* 设置层级，保证可以被右边图片覆盖一部分 */
            }
            .middle-image{
                margin-left: -10rpx; /* 负值，让其向左覆盖左边图片一部分，可调整数值来控制覆盖程度 */
                // z-index: 2; /* 层级比左边高，覆盖左边 */
            }
            .right-image{
                margin-left: -10rpx; /* 负值，让其向左覆盖中间图片一部分，可调整数值来控制覆盖程度 */
                z-index: 3; /* 层级比中间高，覆盖中间 */
            }
        }
        .allMembers{
            margin-left: 14rpx;
            font-size: 24rpx;
            line-height: 24rpx;
            text-align: left;
            color: #FFFFFF; 
        }
    }
    .btnArea{
        margin-top: 38rpx;
        margin-bottom: 20rpx;
        padding: 0rpx 48rpx;
        text-align: center;
    }
}
::v-deep .btnArea .van-button--default {
    width: 100%;
    height: 76rpx;
    border-radius:38rpx;
    font-size: 26rpx;
    line-height: 26rpx;
    background: transparent !important;
    border: 1px solid #ffffff !important;
    color: #ffffff !important;
}

.swiper_item_num {
    position: absolute;
    bottom: 15px;
    right: 18px;
    border-radius: 25px;
    background: rgb(0, 0, 0, 0.5);
    padding-left: 12px;
    padding-right: 12px;
    height: 25px;
    line-height: 25px;
    font-size: 28rpx;
    text-align: center;
    color: #FFFFFF;
}

// 通知’
.notice{

}
::v-deep #noticeBar .van-icon {
    color: #265EAA !important;
}
.content-top {
    padding-left: 48rpx;
    padding-right: 48rpx;
    .tabs {
        padding: 48rpx 0rpx;
        height: 30rpx;
        line-height: 30rpx;
        display: flex;
        align-items: center;

        .tabbar-item {
            margin-right: 77rpx;
            z-index: 1;
            text-align: center;
            font-size: 26rpx;
            color: #666666;

            &.active {
                font-style: normal;
                font-weight: bolder;
                font-size: 30rpx;
                line-height: 30rpx;
                color: #111111;
            }
        }

        .tabbar-item:last-child {
            margin-right: 0rpx;
        }
    }
}

// 信息列表
.box_content {
    display: flex;
    border-radius: 6rpx;
    background: #ffffff;
    margin-bottom: 40rpx;

    .content_img {
        position: relative;
        margin-right: 20rpx;
        width: 21%;
        display: flex;
        flex-direction: column;
        justify-content: center;

        img {
            // width: 112rpx;
            // height: 112rpx;
            width: 100%;
            height: auto;
        }
    }

    // 图片上的标识
    .status_tips {
        position: absolute;
        height: 34rpx;
        // width: 50%;
        background: #FF6203;
        border-radius: 0rpx 50rpx 50rpx 0rpx;
        align-items: center;
        text-align: center;
        line-height: 34rpx;
        font-size: 20rpx;
        text-align: center;
        color: #ffffff;
        bottom: 19rpx;
        padding: 0rpx 10rpx;
    }

    .content_text {
        width: calc(79% - 20rpx);
        display: flex;
        justify-content: space-between;
        flex-direction: column;

        .content_text_title {
            color: #111111;
            font-size: 26rpx;
            text-align: left;
            line-height: 36rpx;
            max-width: 100%;
        }


        // 超过一行省略
        .act_title {
            max-width: 100%;
            // 超过两行  文字用省略号
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: normal;
        }



        .content_text_subtitle {
            display: flex;
            align-items: center;
            max-width: 100%;
            white-space: nowrap;
            /* 防止文本换行 */
            overflow: hidden;
            /* 超出部分隐藏 */
            text-overflow: ellipsis;

            /* 显示省略号 */
            .content_text_startTime {
                // line-height: 24rpx;
                // height: 24rpx;
                font-size: 24rpx;
                text-align: left;
                color: #666666;
            }
        }

        // 同城活动下的地址
        .content_text_address {
            display: flex;
            align-items: center;
            max-width: 100%;
            white-space: nowrap;
            /* 防止文本换行 */
            overflow: hidden;
            /* 超出部分隐藏 */
            text-overflow: ellipsis;

            /* 显示省略号 */
            .content_text_location {
                // height: 24rpx;
                // letter-spacing: 2px;
                // line-height: 24rpx;
                font-size: 24rpx;
                text-align: left;
                color: #666666;

            }
        }

        .content_text_actStatus {
            height: 32rpx;
            width: 72rpx;
            line-height: 32rpx;
            background-color: rgba(239, 239, 239, 1);
            color: rgba(154, 154, 154, 1);
            font-size: 20rpx;
            padding: 0px 8px;
        }
    }
    .members{
        display: flex;
        align-items: center;
        
        .joinActMembers{
            display: flex;
            align-items: center;
            margin-right: 14rpx;
            .joinUser_info{
                position: relative;
                width: 32rpx;
                height: 32rpx;
                background: rgb(255, 255, 255);
                border-radius: 50%;
            }
            .image-item{
                position: absolute;
                border-radius: 50px;
                left: 1rpx;
                top: 1rpx;
                width: 32rpx;
                height: 32rpx;
                // line-height: 40rpx;
            }

            .left-image{
                // position: absolute;
                // left: 0px;
                z-index: 1; /* 设置层级，保证可以被右边图片覆盖一部分 */
            }
            .middle-image{
                margin-left: -10rpx; /* 负值，让其向左覆盖左边图片一部分，可调整数值来控制覆盖程度 */
                z-index: 2; /* 层级比左边高，覆盖左边 */
            }
            .right-image{
                margin-left: -10rpx; /* 负值，让其向左覆盖中间图片一部分，可调整数值来控制覆盖程度 */
                z-index: 3; /* 层级比中间高，覆盖中间 */
            }
        }
        .actStatus{
           
            font-size: 24rpx;
            line-height: 24rpx;
            text-align: left;
            color: #666666; 
            display: flex;
            align-items: center;

            .status{
                font-size: 24rpx;
                line-height: 24rpx;
                text-align: left;
                color: #FF6203;
            }
        }
    }
}

.box_content :last-child {
    margin-bottom: 0px;
}

.loading {
    text-align: center;
    margin-top: 16px;
    color: #242629;
    font-size: 28rpx;
}

::v-deep .van-nav-bar__left {
    width: 56px;
    height: 44px;
}

::v-deep #navBar .van-icon {
    color: #242629 !important;
}


::v-deep .van-nav-bar__title {
    font-size: 28rpx;
    color: #333333;
}

::v-deep .van-hairline--bottom:after {
    border: none;
}





.pl15 {
    padding-left: 15px;
}

.l20 {
    margin-left: 20px;
}

.r12 {
    margin-right: 12px;
}

.r13 {
    margin-right: 13px;
}

.r8 {
    margin-right: 8px;
}

::v-deep .van-icon-arrow {
    color: #b3b3b3 !important;
}

::v-deep .van-info {
    background-color: #FF6203;
}
</style>
